<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 柚木
  Date: 2022/12/28
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/includePage.css">
    <link rel="stylesheet" href="css/bookHomePage.css">
    <script src="https://kit.fontawesome.com/e91f25b25e.js" crossorigin="anonymous"></script>
    <title>图书管理系统-首页</title>
</head>

<%@ include file="IncludePage.jsp" %>

<div class="search">
    <a href="#" class="link search-title">BookManage</a>
    <input type="text" class="search-input" id="search-input" placeholder="请输入书名">
    <button class="btn search-btn" id="search-btn">搜索</button>
</div>
<div class="btn reset-btn" id="reset-btn">重置</div>

<div class="search-auto-complete" id="auto-complete">
    <ul class="auto-complete-list" id="auto-complete-list">
    </ul>
</div>

<div class="book-table">
    <ul class="item">
        <c:forEach var="Book" items="${sessionScope.bookList}">
            <a href="bookDetails?bookId=${Book.bookId}">
                <li class="bookItem" id="book${Book.bookId}">
                        ${Book.bookName}<br>
                </li>
            </a>
        </c:forEach>
        <c:forEach var="Book" items="${sessionScope.bookList}">
            <a href="bookDetails?bookId=${Book.bookId}">
                <li class="bookItem" id="book${Book.bookId}">
                        ${Book.bookName}<br>
                </li>
            </a>
        </c:forEach>
        <c:forEach var="Book" items="${sessionScope.bookList}">
            <a href="bookDetails?bookId=${Book.bookId}">
                <li class="bookItem" id="book${Book.bookId}">
                        ${Book.bookName}<br>
                </li>
            </a>
        </c:forEach>
    </ul>

    <%--    分页--%>
    <div class="nav-bottom">
        <p class="total" style="font-size: 14px;">共1页</p>
        <button class="link" id="prev">上一页</button>
        <p class="current-page" index="1" style="font-size: 14px;">第1页</p>
        <button class="link" id="next">下一页</button>
        <p style="font-size: 14px;">跳转到第</p>
        <input type="text" class="target-page">
        <p style="font-size: 14px;">页</p>
        <button class="btn">确定</button>
    </div>
</div>

<script src="js/includePage.js"></script>
<script src="js/bookHome.js"></script>
<script>
    //因为用到session，所以把script写在这里了
    //点击重置按钮
    $(document).on('click', '#reset-btn', function () {
        //清空表格
        $('.bookItem').remove();

        //清空输入内容
        $('#search-input').val('');

        var innerHTML = '';

        //填充内容
        innerHTML += '<c:forEach var="Book" items="${sessionScope.bookList}">\n' +
            '            <a href="bookDetails?bookId=${Book.bookId}"><li class="bookItem" id="book${Book.bookId}">\n' +
            '          ${Book.bookName}<br>\n' +
            '          </li></a>\n' +
            '           </c:forEach>\n' +
            '<c:forEach var="Book" items="${sessionScope.bookList}">\n' +
            '            <a href="bookDetails?bookId=${Book.bookId}"><li class="bookItem" id="book${Book.bookId}">\n' +
            '          ${Book.bookName}<br>\n' +
            '          </li></a>\n' +
            '           </c:forEach>\n' +
            '<c:forEach var="Book" items="${sessionScope.bookList}">\n' +
            '            <a href="bookDetails?bookId=${Book.bookId}"><li class="bookItem" id="book${Book.bookId}">\n' +
            '          ${Book.bookName}<br>\n' +
            '          </li></a>\n' +
            '           </c:forEach>\n'
        ;

        $('.item').append(innerHTML);

        //再初始化一遍
        //加图片
        var bookLi = document.getElementsByClassName("bookItem");
        for (var i = 0; i < bookLi.length; i++) {
            var name = bookLi[i].id;
            bookLi[i].style.backgroundImage = 'url(/images/' + name + '.jpeg)';
        }

        //加index
        var books = $(".bookItem").length;
        var pages = Math.ceil(books / 8);
        for (var i = 0; i < pages; i++) {
            for (var j = 0; j < 8; j++) {
                if (j + i * 8 == books) break;
                bookLi[j + i * 8].setAttribute("index", i + 1);
            }
        }

        $(".total").html('共'+pages+'页');
        //回到第一页
        $(".current-page").attr("index", 1);
        $(".current-page").html('第1页');
        for (var i = 0; i < bookLi.length; i++) {
            //先全部隐藏
            bookLi[i].style.display = 'none';
            //index符合时显示
            if (bookLi[i].getAttribute("index") == 1) bookLi[i].style.display = 'inline-block';
        }

    })
</script>
</body>
</html>
